<template>
  <div class="all">
    <table class="contentTable">
      <thead>
        <tr>
          <th colspan="2">
            查询设定
          </th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td class="contentTable-left">
            日期范围
          </td>
          <td>
            <div class="block">
              <label>
                <input type="text" v-model="dateBt" id="to">
              </label>
              —
              <label>
                <input type="text" v-model="dateEt" id="from">
              </label>
              <button @click="getDateToday">
                今天
              </button>
              <button @click="getDateLastToday">
                昨天
              </button>
              <button @click="getDateWeek">
                本星期
              </button>
              <button @click="getDateLastWeek">
                上星期
              </button>
              <button @click="getDateMonth">
                本月
              </button>
              <button @click="getDateLastMonth">
                上月
              </button>
            </div>
          </td>
        </tr>
        <tr>
          <td class="contentTable-left">
            种类
          </td>
          <td>
            <ul>
              <button @click="chooseAll" class="contentTableBtn">
                全部选择
              </button>
              <button @click="chooseNotAll" class="contentTableBtn">
                全部不选择
              </button>
            </ul>
            <ul>
              <li>
                <span>快开彩彩种</span>
                <hr/>
                <label>
                  <input type="radio" v-model="qkRadio" :value="true" @change="changeRadio('qk')">
                  全选
                </label>
                <label>
                  <input type="radio" v-model="qkRadio" :value="false" @change="changeRadio('qk')">
                  全不选
                </label>
              </li>
                <ul class="checkedGroup">
                 <label v-for="(item, key, index) in lotteryInfo[0]" :key="index">
                   <input type="checkbox"  @change="GetGamePeriods" :value="item.value" v-model="qkCheckList">
                   {{item.label}}
                 </label>
                </ul>
              <li>
                <span>香港彩彩种</span>
                <hr/>
                <label>
                  <input type="radio" v-model="hkRadio" :value="true" @change="changeRadio('hk')">
                  全选
                </label>
                <label>
                  <input type="radio" v-model="hkRadio" :value="false" @change="changeRadio('hk')">
                  全不选
                </label>
              </li>
              <ul class="checkedGroup">
                <label v-for="(item, key, index) in lotteryInfo[1]" :key="index">
                  <input type="checkbox"  @change="GetGamePeriods" :value="item.value" v-model="hkCheckList">
                  {{item.label}}
                </label>
              </ul>
            </ul>
          </td>
        </tr>
        <tr>
          <td class="contentTable-left">
            期数
          </td>
          <td>
            <select v-model="period">
              <option value="0" v-if="periodList.length > 0">
                请选择期数
              </option>
              <option value="0" v-else>
                请选择单一彩种
              </option>
              <option v-for="(item,index) in periodList" :key="index">
                {{item.game_name}} - {{item.period}}
              </option>
            </select>
          </td>
        </tr>
        <tr>
          <td class="contentTable-left">
            {{info.class}}级代理报表种类
          </td>
          <td>
            <label>
              <input type="radio" v-model="reportType" :value="1">
              交收报表
            </label>
            <label>
              <input type="radio" v-model="reportType" :value="2">
              分类报表
            </label>
          </td>
        </tr>
        <tr>
          <td class="contentTable-left">
            结算状态
          </td>
          <td>
            <label>
              <input type="radio" v-model="ostatus" :value="1">
              已结算
            </label>
            <label>
              <input type="radio" v-model="ostatus" :value="2">
              <span class="unsettled">未结算</span>
            </label>
          </td>
        </tr>
        <tr>
          <td class="contentTable-left">
            用户名
          </td>
          <td>
            <input type="text" v-model="userName">
          </td>
        </tr>
        <tr>
          <td class="contentTable-left">
            会员金额
          </td>
          <td>
            <input type="text" v-model="memberAmount">
          </td>
        </tr>
        <tr>
          <td class="contentTable-left">
            盈亏金额
          </td>
          <td>
            <input type="text" v-model="dividend">
          </td>
        </tr>
      </tbody>
    </table>

    <el-row class="bottom-tip">
      备注：6AM-7AM是系统维护维护时间，会影响报表导出功能，敬请谅解
    </el-row>

    <el-row class="bottom">
      <button @click="submit">确认</button>
      <button>取消</button>
    </el-row>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import $ from 'jquery'
import 'jquery-ui/ui/widgets/datepicker'

export default {
  name: 'notice',
  methods: {
    getDateToday() {
      const end = new Date()
      const start = new Date()
      if (end.getHours() < 6) {
        start.setTime(start.getTime() - 3600 * 1000 * 24)
        end.setTime(end.getTime() - 3600 * 1000 * 24)
        this.dateBt = this.CurentTime(start)
        this.dateEt = this.CurentTime(end)
      } else {
        this.dateBt = this.CurentTime(start)
        this.dateEt = this.CurentTime(end)
      }
    },
    getDateLastToday() {
      const end = new Date()
      const start = new Date()
      if (end.getHours() < 6) {
        start.setTime(start.getTime() - 3600 * 1000 * 24 * 2)
        end.setTime(end.getTime() - 3600 * 1000 * 24 * 2)
        this.dateBt = this.CurentTime(start)
        this.dateEt = this.CurentTime(end)
      } else {
        start.setTime(start.getTime() - 3600 * 1000 * 24)
        end.setTime(end.getTime() - 3600 * 1000 * 24)
        this.dateBt = this.CurentTime(start)
        this.dateEt = this.CurentTime(end)
      }
    },
    getDateWeek() {
      const end = new Date()
      const start = new Date()
      const date = new Date()
      var week = date.getDay() // 获取时间的星期数
      date.setDate(date.getDate() - week + 1)
      start.setTime(date)
      date.setDate(date.getDate() + 6)
      end.setTime(date)
      this.dateBt = this.CurentTime(start)
      this.dateEt = this.CurentTime(end)
    },
    getDateLastWeek() {
      const end = new Date()
      const start = new Date()
      const date = new Date()
      var week = date.getDay() // 获取时间的星期数
      date.setDate(date.getDate() - week)
      end.setTime(date)
      date.setDate(date.getDate() - 6)
      start.setTime(date)
      this.dateBt = this.CurentTime(start)
      this.dateEt = this.CurentTime(end)
    },
    getDateMonth() {
      const end = new Date()
      const start = new Date()
      const date = new Date()
      let currentMonth = date.getMonth()
      const nextMonth = ++currentMonth
      const nextMonthFirstDay = new Date(date.getFullYear(), nextMonth, 1)
      const oneDay = 1000 * 60 * 60 * 24
      const lastTime = new Date(nextMonthFirstDay - oneDay)
      start.setTime(date.setDate(1))
      end.setTime(lastTime)
      this.dateBt = this.CurentTime(start)
      this.dateEt = this.CurentTime(end)
    },
    getDateLastMonth() {
      const end = new Date()
      const start = new Date()
      const date = new Date()
      const oneDay = 1000 * 60 * 60 * 24
      const lastMonthlast = new Date(date.setDate(1) - oneDay) // 上个月最后一天
      let currentMonth = date.getMonth()
      const lastMonth = --currentMonth
      const lastMonthFirst = new Date(date.getFullYear(), lastMonth, 1) // 上个月第一天
      start.setTime(lastMonthFirst)
      end.setTime(lastMonthlast)
      this.dateBt = this.CurentTime(start)
      this.dateEt = this.CurentTime(end)
    },
    GetGamePeriods() {
      this.periodList = []
      if ((this.qkCheckList.length === 1 && this.hkCheckList.length === 0) || (this.qkCheckList.length === 0 && this.hkCheckList.length === 1)) {
        if (this.qkCheckList.length === 1) {
          this.nowSelectedGame = this.qkCheckList[0]
        } else {
          this.nowSelectedGame = this.hkCheckList[0]
        }
        const params = {
          bt: this.dateBt.replace(/-/g, ''),
          et: this.dateEt.replace(/-/g, ''),
          game: this.nowSelectedGame,
        }
        this.$store.dispatch('GetGamePeriods', params)
          .then(response => {
            for (const key in response) {
              if (key !== 'message') {
                this.periodList.push(response[key])
              }
            }
          })
      }
    },
    chooseNotAll() {
      this.qkCheckList = []
      this.hkCheckList = []
    },
    chooseAll() {
      this.qkCheckList = this.beforeQkCheckList
      this.hkCheckList = this.beforeHkCheckList
    },
    changeRadio(type) {
      if (type === 'qk') {
        if (this.qkRadio) {
          this.qkCheckList = this.beforeQkCheckList
        } else {
          this.qkCheckList = []
        }
      }
      if (type === 'hk') {
        if (this.hkRadio) {
          this.hkCheckList = this.beforeHkCheckList
        } else {
          this.hkCheckList = []
        }
      }
    },
    // 获取彩种数据
    getLottery() {
      this.lotteryInfo = []
      this.qkCheckList = []
      this.hkCheckList = []
      this.$store.dispatch('GetReplenishmentsGames')
        .then(response => {
          for (const key in response) {
            if (key !== 'message') {
              const tempNav = []
              for (const index in response[key]) {
                if (key === '快开彩') {
                  this.qkCheckList.push(index)
                }
                if (key === '香港彩') {
                  this.hkCheckList.push(index)
                }
                const temp = {
                  label: response[key][index],
                  value: index,
                }
                tempNav.push(temp)
              }
              this.lotteryInfo.push(tempNav)
            }
          }
          this.beforeQkCheckList = JSON.parse(JSON.stringify(this.qkCheckList))
          this.beforeHkCheckList = JSON.parse(JSON.stringify(this.hkCheckList))
        })
      console.log('0000000000000', this.lotteryInfo)
    },
    submit() {
      const tempGame = []
      if (this.qkCheckList.length > 0) {
        for (const key in this.qkCheckList) {
          tempGame.push(this.qkCheckList[key])
        }
      }
      if (this.hkCheckList.length > 0) {
        for (const key in this.hkCheckList) {
          tempGame.push(this.hkCheckList[key])
        }
      }

      let tempPeriod = null
      if (this.period != 0) {
        tempPeriod = this.period.substring((this.period.lastIndexOf(' ') + 1), this.period.length)
      }

      const params = {
        bt: this.dateBt,
        et: this.dateEt,
        ostatus: this.ostatus,
        games: tempGame,
        sname: this.userName,
        username: this.info.username,
        period: tempPeriod,
        amount: this.memberAmount,
        dividend: this.dividend,
        detail: 1, // 获取彩种明细
      }

      if (this.reportType === 1) {
        this.$store.commit('SET_PAYFROMPARAMS', params)
        this.$router.push({
          name: 'report_detailedReport',
          query: {
            type: 'report', // 交收报表
            parObj: JSON.stringify(params),
            name: params.username,
          },
        })
      } else if (this.reportType === 2) {
        this.$store.dispatch('GetGameReport', params)
          .then(() => {
            this.$store.commit('SET_PAYFROMPARAMS', params)
            this.$router.push({
              name: 'report_detailedReport',
              query: {
                type: 'type', // 分类报表
              },
            })
          })
      }
    },
    CurentTime(value) {
      const now = new Date(value)
      const year = now.getFullYear()
      const month = now.getMonth() + 1
      const day = now.getDate()
      let clock = year + '-'
      if (month < 10) {
        clock += '0'
      }
      clock += month + '-'
      if (day < 10) {
        clock += '0'
      }
      clock += day
      return (clock)
    },
  },
  created() {
    this.getLottery()
    const start = new Date()
    if (start.getHours() < 6) {
      start.setTime(start.getTime() - 3600 * 1000 * 24)
      this.dateBt = this.CurentTime(start)
      this.dateEt = this.CurentTime(start)
    } else {
      this.dateBt = this.CurentTime(start)
      this.dateEt = this.CurentTime(start)
    }
    // this.getLottery()
    // const nowTime = new Date()
    // this.dateBt = this.CurentTime(nowTime)
    // this.dateEt = this.CurentTime(nowTime)
  },
  mounted() {
    const _this = this
    $(function() {
      $('#to').datepicker({
        showMonthAfterYear: true,
        prevText: '上个月',
        nextText: '下个月',
        dayNames: ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'],
        dayNamesShort: ['周日', '周一', '周二', '周三', '周四', '周五', '周六'],
        dayNamesMin: ['日', '一', '二', '三', '四', '五', '六'],
        monthNames: ['一月', '二月', '三月', '四月', '五月', '六月',
          '七月', '八月', '九月', '十月', '十一月', '十二月'],
        dateFormat: 'yy-mm-dd',
        firstDay: 1,
        onSelect: function(date) {
          _this.dateBt = date
        },
      })
      $('#from').datepicker({
        showMonthAfterYear: true,
        prevText: '上个月',
        nextText: '下个月',
        dayNames: ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'],
        dayNamesShort: ['周日', '周一', '周二', '周三', '周四', '周五', '周六'],
        dayNamesMin: ['日', '一', '二', '三', '四', '五', '六'],
        monthNames: ['一月', '二月', '三月', '四月', '五月', '六月',
          '七月', '八月', '九月', '十月', '十一月', '十二月'],
        dateFormat: 'yy-mm-dd',
        firstDay: 1,
        onSelect: function(date) {
          _this.dateEt = date
        },
      })
    })
  },
  data() {
    return {
      nowSelectedGame: '',
      qkRadio: true,
      hkRadio: true,
      qkCheckList: [],
      hkCheckList: [],
      beforeQkCheckList: [],
      beforeHkCheckList: [],
      lotteryInfo: [], // 彩种数据
      dateBt: '', // 日期范围
      dateEt: '',
      reportType: 1, // 报表种类
      ostatus: 1, // 结算类型
      userName: null, // 用户名
      memberAmount: null, // 会员金额
      dividend: null, // 盈亏金额
      period: 0, // 彩种期数，选择单一彩种时可选
      periodList: [],
    }
  },
  computed: { ...mapGetters(['info']) },
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  .all{
    padding: 10px;
  }
.contentTable{
  border-collapse: collapse;
  border-spacing: 0;
  width: 100%;
}
.contentTable th{
  box-shadow: inset 0px -14px 19px 2px #CAE8F6;
  height: 25px;
  text-align: center;
  color: #131950;
  font-weight: bold;
  line-height: 25px;
  font-size:14px;
  padding-left: 10px;
  padding-right: 10px;
  border: 1px solid #B9C2CB;
  margin: 0;
}
.contentTable td{
  height: 25px;
  color: #131950;
  line-height: 25px;
  font-size:14px;
  border: 1px solid #B9C2CB;
  padding: 5px;
}
.contentTable td input[type='text']{
  /*width:100px;*/
}
.contentTable td .el-radio{
  margin:0 5px;
}
.contentTableBtn{
  margin:0 5px;
  background-color: #00b45a;
  border:0;
  padding: 5px 10px;
  color:#FFF;
}
.contentTableBtn:hover{
  text-decoration: underline;
}
.contentTable ul li{
  height:25px;
  line-height: 25px;
}
.block span{
  padding:0 !important;
}
.contentTable hr{
  width:600px;
  display: inline-block;
  vertical-align: middle;
}
.contentTable-left{
  text-align: right;
  color: #344b50;
  background: #f2f2f2;
  width:30%;
  font-weight: bold;
}
  .unsettled {
    color: #2836f4;
  }

.bottom-tip{
  text-align: center;
  color:red;
  font-size:13px;
  margin: 10px;
}

.bottom{
  text-align: center;
  margin-top: 20px;
}
.bottom button{
  width: 86px;
  height: 31px;
  line-height: 26px;
  color: #eeeeee;
  background: url(/static/agent/img/nav_bu.png) repeat-x left -134px;
  border: 0px;
}
.bottom button:hover{
  color: #fff100;
  background: url(/static/agent/img/nav_bu.png) repeat-x left -165px;
}
  .checkedGroup{
    width:800px;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    margin-left: 40px;
  }
  .checkedGroup label{
    margin-left: 30px;
    width: 150px;
  }
</style>
<style>
  .block .el-date-editor .el-range-separator{
    padding: 0;
  }
</style>
